<template lang="">
  <h3>{{ $t("ziJi-1") }}</h3>
  <div style="margin-bottom: 15px">
    <a-space>
      <div>
        <span>{{ $t("xuan-1") }}</span>
        <a-range-picker
          :ranges="ranges"
          v-model:value="formData.dates"
          format="YYYY-MM-DD HH:mm:ss"
        />
      </div>
      <div>
        <span>{{ $t("jiao-0") }}</span>
        <a-select
          v-model:value="formData.change_type"
          style="width: 200px"
          :options="transactionTypOption"
          allowClear
        ></a-select>
      </div>
    </a-space>
  </div>
  <a-table
    :columns="columns"
    :row-key="(record) => record.object_id"
    :data-source="list"
    :loading="loading"
    :pagination="pagination"
    bordered
    @change="handleTableChange"
  >
    <template #bodyCell="{ column, text }">
      <template v-if="column.dataIndex === 'change_type'">
        <span>{{ getTransactionTypeName(text) }}</span>
      </template>
      <template v-if="column.dataIndex === 'status'">
        <span>{{ getStatusName(text) }}</span>
      </template>
    </template>
  </a-table>
</template>
<script setup lang="ts">
import { ref } from "vue";
import dayjs, { Dayjs } from 'dayjs';
import type { TableColumnType } from "ant-design-vue";
import { useI18n } from "vue-i18n";
import {
  getCapitalRecord,
  type TGetCapitalRecordParams,
} from "@/api/financial";
import type { RangeValue } from "ant-design-vue/es/vc-picker/interface";

const { t } = useI18n();

const transactionTypOption = ref<any[]>([
  {
    label: t("yong-3"),
    value: 1,
  },
  {
    label: t("ziJi-0"),
    value: 2,
  },
  {
    label: t("youX-0"),
    value: 3,
  },
  // {
  //   label: t("huoD-0"),
  //   value: 4,
  // },
  {
    label: t("meiR-0"),
    value: 5,
  },
  // {
  //   label: t("tuiG-0"),
  //   value: 6,
  // },
  // {
  //   label: t("renG-0"),
  //   value: 7,
  // },
  // {
  //   label: "游戏消费",
  //   value: 8,
  // },
  // {
  //   label: "优惠券发放失败",
  //   value: 9,
  // },
  // {
  //   label: "预支优惠",
  //   value: 10,
  // }
]);
const status = ref<any[]>([
  {
    label: "进行中",
    value: 1,
  },
  {
    label: "已完成",
    value: 2,
  },
  {
    label: "失败",
    value: 3,
  },
]);
const ranges = ref<any>({
  "今天": [dayjs().startOf('day'), dayjs().endOf('day')],
  '昨天': [dayjs().subtract(1, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
  "近七天 (不包括今天)": [dayjs().subtract(7, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
  "近一周 (包括今天)": [dayjs().subtract(6, 'day').startOf('day'), dayjs().endOf('day')],
  "本周": [dayjs().startOf('week'), dayjs().endOf('week')],
  "近一个月 (不包括今天)": [dayjs().subtract(30, 'day').startOf('day'), dayjs().subtract(1, 'day').endOf('day')],
  "上月": [dayjs().subtract(1, 'month').startOf('month'), dayjs().subtract(1, 'month').endOf('month')],
  "本月": [dayjs().startOf('month'), dayjs().endOf('month')]
})

function getTransactionTypeName(key: number) {
  const item = transactionTypOption.value.find((item) => item.value === key);
  let name = "";
  if (item) {
    name = item.label;
  }
  return name;
}

function getStatusName(key: number) {
  const item = status.value.find((item) => item.value === key);
  let name = "";
  if (item) {
    name = item.label;
  }
  return name;
}

const list = ref<any[]>([]);

const loading = ref<boolean>(false);
const pagination = ref<any>({
  total: 0,
  current: 1,
  pageSize: 10,
});

const formData = reactive<TGetCapitalRecordParams>({
  start: "",
  end: "",
  change_type: undefined,
  dates: [] 
});
watch(
  () => formData,
  (value) => {
    pagination.value.current = 1;
    console.log(value);
    fetchList();
  },
  {
    deep: true,
  }
);

function handleDateValue(dates: any) {
  let data: any = {};
  if (Array.isArray(dates)) {
    dates = dates.map((date: any) =>
       dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    );
    console.log(dates, 121212);

    data.start = dates[0];
    data.end = dates[1];
  } else {
    data.start = "";
    data.end = "";
  }
  return data;
}

const columns = [
  {
    title: t("shiJ"),
    dataIndex: "change_time",
    key: "change_time",
  },
  {
    title: t("jiao-1"),
    dataIndex: "change_type",
    key: "change_type",
  },
  {
    title: t("bian-0"),
    dataIndex: "change_before",
    key: "change_before",
  },
  {
    title: t("ziJi-2"),
    dataIndex: "amount",
    key: "amount",
  },
  {
    title: t("bian-1"),
    dataIndex: "change_after",
    key: "change_after",
  },
  // {
  //   title: t("quDa"),
  //   dataIndex: "object_id",
  //   key: "object_id",
  //   ellipsis: true,
  // },
  {
    title: t("zhuan-2"),
    dataIndex: "status",
    key: "status",
  },
];

function fetchList(params?: TGetCapitalRecordParams & {}) {

  loading.value = true;
  const newFormData = {
    ...formData
  }
  const dateInfo = handleDateValue(newFormData.dates);
  delete newFormData.dates;

  getCapitalRecord({
    ...newFormData,
    ...dateInfo,
    pageSize: pagination.value.pageSize,
    current: pagination.value.current,
    ...params,
  })
    .then((res: any) => {
      const { list: data, pagination_result } = res;
      if (Array.isArray(data)) {
        list.value = data;
      } else {
        list.value = [];
      }

      if (pagination_result) {
        pagination.value.total = pagination_result.total;
        pagination.value.current = pagination_result.current;
        pagination.value.pageSize = pagination_result.pageSize;
      }
    })
    .catch((err: any) => {
      console.log(err);
    })
    .finally(() => {
      loading.value = false;
    });
}

const handleTableChange = (
  page: { pageSize: number; current: number },
  filters: any,
  sorter: any
) => {
  pagination.value.pageSize = page.pageSize;
  pagination.value.current = page.current;

  fetchList();
};

onBeforeMount(() => {
  fetchList();
});
</script>
<style lang=""></style>
